<!--
 * @Author: QUAN
 * @Date: 2021-11-08 15:08:55
 * @LastEditTime: 2021-12-08 09:31:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \mutong-jimu-h5-activity\src\views\Lottery\index.vue
-->
<template>
  <!-- 活动已下线 -->
  <div class="offline" v-if="errMsg">
    <van-nav-bar
      title="活动已下线"
      left-arrow
      v-if="$UA.isJM"
      @click-left="toApp"
      class="my-nav-bar"
    ></van-nav-bar>
    <div class="off-line-box">
      <img src="../../assets/images/lottery/act-over.png" alt="" />
      <p>活动已下线~</p>
    </div>
  </div>

  <div class="lottery" v-else>
    <bottom-open-app-adv v-if="!$UA.isJM" :ymParmas="ymParmas"></bottom-open-app-adv>
    <van-nav-bar
      :title="info.title"
      left-arrow
      v-if="$UA.isJM"
      @click-left="toApp"
      @click-right="share"
      class="my-nav-bar"
    >
      <template #right>
        <img src="../../assets/images/activity/share.png" alt="" />
      </template>
    </van-nav-bar>
    <!-- :style="{ background: `url(${info.json.bg}) 0% 0% / cover no-repeat fixed` }" -->
    <!-- ios用不了fixed，只能这么写了 -->
    <div
      class="bg"
      :class="{ app: $UA.isJM }"
      v-if="info.json && info.json.bg"
      :style="{ '--bgImage': `url('${info.json.bg}') center 0 no-repeat` }"
    >
      <!-- 图片背景 -->
      <div class="img-box" v-if="info.json && info.json.imgList.length">
        <img :src="item" v-for="(item, index) in info.json.imgList" :key="index" alt="" />
      </div>
    </div>
    <!-- 这里才是真正的内容 -->
    <div class="content">
      <!-- 抽奖组件 -->
      <join-lottery :lotteryId="lotteryId"></join-lottery>
      <!-- 评论组件 -->
      <Comment v-if="info.json && info.json.comment"></Comment>
    </div>
  </div>
</template>
<script>
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import Comment from '../../components/Comment.vue';
  import { Button, NavBar, Toast } from 'vant';
  import JoinLottery from '../../components/JoinLottery.vue';
  import mixins from 'mixins';
  export default {
    mixins: [mixins],
    components: {
      BottomOpenAppAdv,
      Comment,
      JoinLottery,
      // 'van-button': Button,
      'van-nav-bar': NavBar,
    },
    data() {
      return {
        info: {},
        lotteryId: '',
        shareData: {}, //分享数据
        errMsg: '',
        lotteryQuery: {}, //参数
        userInfoDataApp: {}, //从app获取信息
      };
    },
    computed: {},
    watch: {
      '$userInfo.nickname': {
        handler(val) {
          // 处理邀请
          this.inviteFirend();
        },
      },
    },
    created() {
      // 设置参数
      let _query = [];
      _query = window.location.href.split('?')[1].slice(3).split('-');
      this.lotteryQuery.id = _query[0] || '';
      this.lotteryQuery.uuid = _query[1] || '';
      // console.log(this.lotteryQuery)

      // 设置友盟参数
      this.ymParmas = `https://${
        process.env.NODE_ENV === 'development' ? 'dev-' : ''
      }jimu-h5.movtile.com/activity/lottery.html?id=${
        this.lotteryQuery.uuid
          ? this.lotteryQuery.id + '-' + this.lotteryQuery.uuid
          : this.lotteryQuery.id
      }`;
      this.ymParmas = `mtjimu://webview?url=${encodeURIComponent(this.ymParmas)}`

      // 初始化
      this.getH5Detail();
    },
    mounted() {
      // 刷新
      this.$EventBus.$on('jm:hybridActive', () => {
        // 这里或者可以写this.getUserInfo()，这样之后$userInfo里面就会有数据
        // 从app获取用户信息
        this.$appService.userInfo().then((res) => {
          this.userInfoDataApp = res;

          // 处理邀请
          this.inviteFirend();
        });
      });
    },
    methods: {
      // 触发邀请
      inviteFirend() {
        // 处理邀请
        if (
          this.lotteryQuery.uuid &&
          (this.$userInfo.nickname || this.userInfoDataApp.nickname) &&
          ((this.$userInfo.uuid && this.lotteryQuery.uuid !== this.$userInfo.uuid) ||
            (this.userInfoDataApp.uuid && this.lotteryQuery.uuid !== this.userInfoDataApp.uuid))
        ) {
          // 邀请的话得先获取抽奖id
          this.$service.SalesH5Detail({ hid: this.lotteryQuery.id }).then((res) => {
            let _id = res.json.compId;
            // 邀请
            this.$service
              .UserInviteAdd({ from: this.lotteryQuery.uuid, subjectType: 9, subjectId: _id })
              .then((res) => {
                this.getH5Detail();
              })
              .catch((err) => {
                this.getH5Detail();
              });
          });
        } else {
          this.getH5Detail();
        }
      },

      //活动频道
      getH5Detail() {
        // 先滞空在获取，为了触发监听
        this.lotteryId = '';
        this.$service
          .SalesH5Detail({ hid: this.lotteryQuery.id })
          .then((res) => {
            this.info = res;
            this.lotteryId = this.info.json.compId;
            // 设置头部
            this.$appService.setNav({
              title: this.info.title,
              fullscreen: true,
            });

            // 这里得设置分享的东西
            this.shareData = {
              title: this.info.json.title,
              desc: this.info.json.dec,
              imgUrl: this.info.json.cover,
              link: `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }jimu-h5.movtile.com/activity/lottery.html?id=${
                this.$userInfo.uuid
                  ? this.lotteryQuery.id + '-' + this.$userInfo.uuid
                  : this.lotteryQuery.id
              }`,
            };

            // 微信分享
            wx.ready(() => {
              this.$setShareInfo(this.shareData);
            });
          })
          .catch((err) => {
            this.$appService.setNav({
              title: '',
              fullscreen: true,
            });

            this.errMsg = err.message;
            Toast(this.errMsg);
          });
      },

      // 返回App
      toApp() {
        this.$appService.exit();
      },

      // 分享
      share() {
        if (this.$userInfo.nickname) {
          if (this.$UA.isJM) {
            this.$appService.share({ ...this.shareData });
          } else {
            Toast('点击右上角分享吧！');
          }
        } else {
          this.login();
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  // navbar
  .my-nav-bar {
    height: 8.4rem;
    padding-top: 3.5rem;
  }

  // vant 样式修改
  /deep/ .van-nav-bar {
    .van-nav-bar__title {
      color: #111;
      font-weight: 600;
      font-size: 18px;
    }
    .van-nav-bar__arrow {
      font-size: 18px;
    }
    .van-nav-bar__right {
      img {
        width: 2.4rem;
        height: 2.4rem;
      }
    }
    .van-icon {
      color: #111;
    }
  }

  .lottery {
    width: 100%;
    min-height: 100vh;

    // 背景
    .bg {
      position: relative;
      overflow: hidden;
      width: 100%;
      margin-top: 6.5rem;
      &::before {
        content: ' ';
        position: fixed;
        z-index: -1;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        background: var(--bgImage);
        background-size: cover;
      }
    }
    .img-box {
      img {
        width: 100%;
      }
    }
    .app {
      margin-top: 0rem;
    }
  }

  // 活动下线
  .offline {
    width: 100%;
    min-height: 100vh;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #111111;
    position: relative;
    overflow: hidden;
    .off-line-box {
      margin-top: 60%;
      text-align: center;
      img {
        width: 50%;
        margin-top: 50%;
        margin-left: 50%;
        transform: translateX(-50%);
      }
      p{
        margin-top: 10px;
        color: #aaa;
      }
    }
  }
</style>
